<template>
  <div class="">
    <div class="" style="display: inline-block;margin-left: 5px;" v-for="(item, index) in data">
      <Input type="number" v-model="item.num" style="width: 280px">
          <Select v-model="item.name" slot="prepend" :transfer="true"	 style="width: 180px;"  placeholder="选择题库">
              <Option v-for="item in quesparentnames" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <Button slot="append" icon="android-delete" @click="deleteIndex(index)" style="padding: 3px 8px;font-size: 20px;height: 32px;"></Button>
      </Input >
    </div>
    <Button type="ghost" icon="plus" @click="addTags" :class="{'input-group-dislocation': data.length > 0}"></Button>
  </div>
</template>

<script>
export default {
  title: '标签组',
  name: 'group-tags',
  props: {
    value: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      data: [
        {name: '',num: 0}
      ]
    }
  },
  mounted () {
    this.data = this.value
  },
  methods: {
    addTags () {
      this.data.push({name: '',num: 0})
    },
    deleteIndex (index) {
      this.data.splice(index, 1)
    }
  }, // this.$emit('input', this.model);
  watch: {
    data: {
      handler: function () {
        this.$emit('input', this.data)
      },
      deep: true
    },
    value () {
      this.data = this.value
    }
  },
  computed: {
    quesparentnames () {
      return this.$getParams('题库名称')
      // return [
      //   {label: 'tiku', value: 'tiku'},
      //   {label: 'tiku', value: 'tiku'},
      //   {label: 'tiku', value: 'tiku'},
      //   {label: 'tiku', value: 'tiku'},
      // ]
    }
  },
}
</script>

<style lang="less">
  .input-group-dislocation {
    position: relative;
    top: -12px;
  }
</style>
